<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简历生成器</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/resume.css">
    <link rel="stylesheet" href="css/editable-span.css">
    <script src="//at.alicdn.com/t/font_1266175_iq85ixkg41.js"></script>
</head>
<body>
<div class="page">
    <div class="aside">
        <div class="upper">
            <ul class="actions">
                <li>
                    <button class="button">保存</button>
                </li>
                <li>
                    <button class="button">分享</button>
                </li>
                <li>
                    <button class="button">打印</button>
                </li>
                <li>
                    <button class="button">换肤</button>
                </li>
            </ul>
        </div>
        <div class="down">
            <ul class="actions">
                <li>
                    <button class="button">登出</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="main" id="app">
        <header>
            <figure>
                <div class="avatar">
                    <img src="graph/avatar.png" alt="">
                </div>
                <figcaption>应聘 <span contenteditable="true" @input="onEdit">{{resume.job_title}}</span></figcaption>
            </figure>
        </header>
        <aside>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-personal_information"></use>
            </svg>
        </span>
                <h2>基本信息</h2>
                <hr>
                <div class="detail">
                    <div class="icon-list">
                        <span class="iconfont"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-name"></use></svg></span>
                        <editable-span :value="resume.name"  @edit="onEdit('name',$event)"></editable-span>
                    </div>
                    <div class="icon-list">
                        <span class="iconfont"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-age"></use></svg></span>
                        <editable-span :value="resume.age"  @edit="onEdit('age',$event)"></editable-span>
                    </div>
                    <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-phone"></use>
            </svg>
            </span>13604903685
                    </div>
                    <div class="icon-list"><span class="iconfont"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg></span>zhxzuishuai0515
                    </div>
                    <div class="icon-list"><span class="iconfont"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-email"></use>
            </svg></span>649308293@qq.com
                    </div>
                </div>
            </section>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhuye"></use>
            </svg>
        </span>
                <h2>社交主页</h2>
                <hr>
                <div class="detail">
                    <div class="icon-list"><a href="https://github.com/zhuanghaixin"><span class="iconfont"><svg
                            class="icon"
                            aria-hidden="true">
                <use xlink:href="#icon-github"></use>
            </svg></span>Github</a>
                    </div>
                    <div class="icon-list"><a href="https://zhuanghaixin.cn/"><span class="iconfont"><svg class="icon"
                                                                                                          aria-hidden="true">
                <use xlink:href="#icon-website"></use>
            </svg></span>网站</a>
                    </div>
                    <div class="icon-list"><a href="https://www.jianshu.com/u/8e88e609ebe8"><span class="iconfont"><svg
                            class="icon" aria-hidden="true">
                <use xlink:href="#icon-CN_jianshu"></use>
            </svg></span>简书</a>
                    </div>
                    <div class="icon-list"><a href="https://www.yuque.com/zhuanghaixin"><span class="iconfont"><svg
                            class="icon"
                            aria-hidden="true">
                <use xlink:href="#icon-yuque"></use>
            </svg></span>语雀</a>
                    </div>
                </div>
            </section>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-technology"></use>
            </svg>
        </span>
                <h2>掌握技能</h2>
                <hr>
                <div class="detail">
                    <ul>
                        <li>掌握HTML5/CSS3，熟悉传统布局、Flex布局、Grid布局、移动端适配等</li>
                        <li>JavaScript 基础掌握良好，例如 this、闭包、原型链、作用域等基本概念。</li>
                        <li>熟悉Vue技术栈如Vue-Router、Vuex、Vue-CLI及相关流行库的使用，理解其重要概念,能够编写简单的 Vue.js 基础组件，以及完成相应的单元测试</li>
                        <li>掌握常用的 Git 命令</li>
                        <li>能够使用 ESlint 规范自己的代码风格，使用有意义的变量名以及意义明确的代码，提高代码的可读性</li>
                    </ul>
                </div>

            </section>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jineng"></use>
            </svg>
        </span>
                <h2>技能图谱</h2>
                <hr>
                <div class="detail">
                    <dl class="skill-bar">
                        <dt>HTML5&CSS3</dt>
                        <dd>
                            <div class="html"></div>
                        </dd>
                        <dt>JavaScript</dt>
                        <dd>
                            <div class="js"></div>
                        </dd>

                        <dt>Vue.js</dt>
                        <dd>
                            <div class="vue"></div>
                        </dd>
                        <dt>Node</dt>
                        <dd>
                            <div class="node"></div>
                        </dd>
                        <dt>React.js</dt>
                        <dd>
                            <div class="react"></div>
                        </dd>
                        <dt>小程序</dt>
                        <dd>
                            <div class="xiaochengxu"></div>
                        </dd>
                    </dl>
                </div>
            </section>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hobby"></use>
            </svg>
        </span>
                <h2>兴趣爱好</h2>
                <hr>
                <div class="detail">
                    <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-changge"></use>
            </svg>
            </span>唱歌
                    </div>
                    <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huihua"></use>
            </svg>
            </span>画画
                    </div>
                    <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jita"></use>
            </svg>
            </span>吉他
                    </div>
                    <div class="icon-list"><span class="iconfont"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jianji"></use>
            </svg></span>剪辑
                    </div>

                </div>
            </section>
        </aside>
        <main>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-school_experience"></use>
            </svg>
        </span>
                <h2>教育经历</h2>
                <hr>
                <div class="detail">
                    <div class="timeline-panel">
                        <div class="date">09/2012~06/2015</div>
                        <h3>沈阳市第二十七中学</h3>
                        <p class="intro"></p>
                        <div class="detail">
                        </div>
                    </div>
                    <div class="timeline-panel">
                        <div class="date">09/2015~07/2019</div>
                        <h3>沈阳化工大学</h3>
                        <p class="intro">软件工程</p>
                        <div class="detail">
                            <ul>
                                <li>辽宁省计算机设计大赛二等奖---《舒乘网》</li>
                                <li>辽宁省大学生创新创业计划--《舒乘网》</li>
                                <li>英语四级：472</li>
                                <li>二次二等院级奖学金,两次三等院级奖学金</li>
                                <li>院级文艺活动展出(唱歌）</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-project"></use>
            </svg>
        </span>
                <h2>项目经历</h2>
                <hr>
                <div class="detail">
                    <div class="timeline-panel">
                        <div class="date">09/2013~07/2017</div>
                        <h3>基于Vue的UI组件库的设计与实现</h3>
                        <div class="detail">
                            <ul>
                                <li>项目介绍：
                                    该项目的是参考目前流行的前端UI组件库Ant
                                    Design,iView进而设计的一款属于自己的组件库，实现了常有组件类型，基础组件，布局组件，导航组件，表单组件，视图组件
                                    。项目使用Vue技术栈，组件库文档使用的是VuePress。
                                </li>
                                <li>技术栈：vue、vue cli3、es6、parcel、karma、</li>
                                <li>项目地址: <a
                                        href="https://github.com/zhuanghaixin/hisen">https://github.com/zhuanghaixin/hisen</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="timeline-panel">
                        <div class="date">03/2019~04/2019</div>
                        <h3>基于Vue的仿CNode网站</h3>
                        <div class="detail">
                            <ul>
                                <li>项目介绍：
                                    该项目的目的是搭建线上学习平台，把线下课堂的完整学习流程搬到线上，平台包括课程展示、购买、直播、录播、作业、权限管理、停课复课、试听等几十个大功能。该项目采用前后分离的技术方案，
                                    我主要负责前端部分的开发。项目前端部分使用Vue技术栈，移动端平台使用自己实现的vue ui组件库。
                                </li>
                                <li>技术栈：vue、vue-router、vuex、element-ui、typescript、webpack、es6、移动端</li>
                                <li>项目成果: 项目支撑饥人谷日常教学活动、运营活动的正常开展，支持数千学生的日常线上学习，几十万用户的日常访问。</li>
                            </ul>
                        </div>
                    </div>
                    <div class="timeline-panel">
                        <div class="date">09/2013~07/2017</div>
                        <h3>会动的简历</h3>
                        <div class="detail">
                            <ul>
                                <li>项目介绍：
                                    该项目的目的是搭建线上学习平台，把线下课堂的完整学习流程搬到线上，平台包括课程展示、购买、直播、录播、作业、权限管理、停课复课、试听等几十个大功能。该项目采用前后分离的技术方案，
                                    我主要负责前端部分的开发。项目前端部分使用Vue技术栈，移动端平台使用自己实现的vue ui组件库。
                                </li>
                                <li>技术栈：vue、vue-router、vuex、element-ui、typescript、webpack、es6、移动端</li>
                                <li>项目地址: 项目支撑饥人谷日常教学活动、运营活动的正常开展，支持数千学生的日常线上学习，几十万用户的日常访问。</li>
                                <li>项目预览: 项目支撑饥人谷日常教学活动、运营活动的正常开展，支持数千学生的日常线上学习，几十万用户的日常访问。</li>
                            </ul>
                        </div>
                    </div>
                    <div class="timeline-panel">
                        <div class="date">09/2013~07/2017</div>
                        <h3>网易云音乐</h3>
                        <div class="detail">
                            <ul>
                                <li>项目介绍：
                                    该项目的目的是搭建线上学习平台，把线下课堂的完整学习流程搬到线上，平台包括课程展示、购买、直播、录播、作业、权限管理、停课复课、试听等几十个大功能。该项目采用前后分离的技术方案，
                                    我主要负责前端部分的开发。项目前端部分使用Vue技术栈，移动端平台使用自己实现的vue ui组件库。
                                </li>
                                <li>技术栈：vue、vue-router、vuex、element-ui、typescript、webpack、es6、移动端</li>
                                <li>项目成果: 项目支撑饥人谷日常教学活动、运营活动的正常开展，支持数千学生的日常线上学习，几十万用户的日常访问。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-self-evaluation"></use>
            </svg>
        </span>
                <h2>个人评价</h2>
                <hr>
                <div class="detail">
                    对前端有着浓厚的兴趣，很喜欢网页界面设计，会经常下载各种app和浏览一些网页，关注产品的用户体验。
                    未来三年规划，希望自己可以成长为独当一面的以产品为方向的前端工程师
                    每天学习英语半小时以上，我深知英语对前端的重要性，不论是对新技术的学习还是技术的深挖
                    会经常写博客总结自己所学。
                </div>
            </section>

        </main>
    </div>
</div>
<script src="../vendors/av-min.js"></script>
<script src="js/av.js"></script>
<script src="../vendors/vue.min.js"></script>
<script src="js/editable-span.js"></script>
<script src="js/app.js"></script>



<script>
</script>
</body>
</html>
